<template>
  <div class="app">
    <h2 class="title">Vue路由测试</h2>
    <!-- 导航区 -->
    <div class="navigate">

      <!-- 防止后退， 不允许后退，   replace  替换上一个页面    push  -->
      <span>
        <RouterLink to="/html" replace active-class="active">HTML知识点</RouterLink>
      </span>
      <span>
        <RouterLink to="/css" replace active-class="active">css知识点</RouterLink>
      </span>
      <span>
        <RouterLink to="/js" replace active-class="active">JavaScript</RouterLink>
      </span>


    </div>
    <!-- 展示区 -->
    <div class="main-content">
      <!-- router-view是占位符    router-view是一个组件 ， 监控路径（路由） 的变化   -->
      <!-- <router-view>
      </router-view> -->

      <RouterView></RouterView>
    </div>
  </div>
</template>

<script lang="ts" setup name="App">
//可以不用显示的注册组件，在main.js中使用的app.use(router)已经注册全局组件
import { RouterLink, RouterView } from 'vue-router'

</script>

<style scoped>
.app {
  width: 800px;
  min-height: 500px;
  box-shadow: 0 0 10px inset;
  padding: 20px;
}

.RouterLink {
  line-height: 50px;
}

.navigate {
  height: 50px;
  line-height: 50px;
  background-image: linear-gradient(45deg, rgb(224, 217, 217) 0 33%, rgb(169, 169, 238) 33% 66%, rgb(157, 181, 157) 66% 100%);
  display: flex
}

.navigate span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navigate span a {
  text-align: center;
}

.navigate span a.active {
  color: red;
}

.navigate span a {
  color: rgb(116, 105, 92);
  font-weight: 900;
  text-decoration: none;
  letter-spacing: 2px;
}

.main-content {
  width: 100%;
  margin: 10px 0;
  border: solid 2px grey;
  box-shadow: 0 0 5px black;
  border-radius: 10px;
}
</style>